@extends('admin.common.web')

@section('title','秒杀列表')

@section('style')
    <style type="text/css">
        .pageList {
            text-align: center;
            margin-top: 2%;
        }

        table{
            table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
        }

        .ellipsis_line{
            width:100%;
            word-break:keep-all;/* 不换行 */
            white-space:nowrap;/* 不换行 */
            overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        }
    </style>
@endsection

@section('content')
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <a href="#">系统</a>
            </li>
            <li class="active">秒杀管理</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->

    <!-- Page Body -->
    <div class="page-body">
        @include('admin.common.msg')

        <button type="button" class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{{ route('admin.goods.index') }}'">
        <i class="fa fa-plus"></i> 添加秒杀商品
        </button>
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <div class="widget-body">
                            <div class="table-scrollable">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th class="text-center" width="4%">ID</th>
                                        <th class="text-center" width="6%">商品ID</th>
                                        <th class="text-center" width="6%">缩略图</th>
                                        <th class="text-center">商品名称</th>
                                        <th class="text-center" width="7%">秒杀价格</th>
                                        <th class="text-center" width="14%">活动时间</th>
                                        <th class="text-center" width="5%">库存</th>
                                        <th class="text-center" width="5%">已售</th>
                                        <th class="text-center" width="8%">状态</th>
                                        <th class="text-center" width="14%">创建时间</th>
                                        <th class="text-center" width="14%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($goodsList as $v)
                                        <tr>
                                            <td align="center">{{ $v['id'] }}</td>
                                            <td align="center">{{ $v['goods_id'] }}</td>
                                            <td align="center">
                                                @if($v['thumb'])
                                                    <img src="{{ asset($v['thumb']) }}" width="30" height="30"/>
                                                @else
                                                    暂无图片
                                                @endif
                                            </td>
                                            <td align="center" class="ellipsis_line">{{ $v['goods_name'] }}</td>
                                            <td align="center">{{ $v['seckill_price'] }}</td>
                                            <td align="center" class="ellipsis_line">{{ $v['start_time'] }}<br>{{ $v['end_time']  }}</td>
                                            <td align="center">{{ $v['inventory'] }}</td>
                                            <td align="center">{{ $v['sale_num'] }}</td>
                                            <td align="center">
                                                @if($v['kill_status'] == 1)
                                                    <label>
                                                        <input seckill_id="{{ $v['id'] }}" class="checkbox-slider toggle colored-success" @if($v['kill_status'] == 1) checked @endif type="checkbox">
                                                        <span class="text"></span>
                                                    </label>
                                                @else
                                                    活动已结束
                                                @endif
                                            </td>
                                            <td align="center"  class="ellipsis_line">{{ $v['created_at'] }}</td>
                                            <td align="center">
                                                <a href="{{ route('admin.user.edit',['id'=>$v['id']]) }}" class="btn btn-primary btn-sm shiny">
                                                    <i class="fa fa-edit"></i> 编辑
                                                </a>
                                                <a href="{{ route('admin.sec_kill.destroy',['id'=>$v['id']]) }}" onClick="return confirm('确定要删除吗？')" class="btn btn-danger btn-sm shiny">
                                                    <i class="fa fa-trash-o"></i> 删除
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        <div>
                        </div>

                        <div class="pageList">
                            {{ $goodsList->appends(request()->input())->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{ asset('js/api_request.js') }}"></script>
    <script type="text/javascript">
        $(()=>{
            //ajax修改用户状态
            $('.checkbox-slider').click(async function () {
                let mybtn = $(this);
                let id = $(this).attr('seckill_id');

                let checked = $(mybtn).prop('checked');

                await requestData('{{ route("admin.sec_kill.ajaxChangeStatus") }}',{id:id},'post').then((res)=>{

                    if(res.data.status == 1){
                        $(mybtn).prop('checked',true);
                    }else{
                        $(mybtn).prop('checked',false);
                        window.location.reload();
                    }
                }).catch((res)=>{
                    if(checked){
                        $(mybtn).prop('checked',false);
                    }else{
                        $(mybtn).prop('checked',true);
                    }

                    alert(res.msg);
                })

            })
        })
    </script>
@endsection
